<template>
  <d2-container class="config">
    <el-row :gutter="12" class="elrow">
      <el-col :span="8" v-for="i in configs" v-show="i.status == 1">
        <el-card shadow="hover">
          <div slot="header" class="clearfix">
            <span class="cirbox">
              <span :style="{background:colorlist[4]}" class="circle"></span>
              <span>{{i.config_note}}</span>
            </span>
            <el-button style="float: right; padding: 3px 0" type="text" @click="dialogVisible=true;ids = i;config_value = i.config_value">编辑
            </el-button>
          </div>
          <div class="center">
            <span class="tesch">
              <i :style="{color:colorlist[4]}" class="el-icon-date" style="font-size:40px;margin-right:6px;"></i>
              <span>{{i.config_note}}</span>
            </span>
            <span>
              目前状态:{{i.config_value}}
            </span>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-dialog
      :visible.sync="dialogVisible"
      width="30%">
      <div style="display:flex;flex-direction: column;">
        <span>配置内容：</span>
        <br/>
        <el-input type="text" v-model="config_value"></el-input>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="updateconfigs">确 定</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </d2-container>
</template>

<script>
  import {configlist, updateconfig} from '@api/sys.login'

  export default {
    data() {
      return {
        colorlist: ['#b6d8d7', '#8cc3c0', '#7c8da7', "#d94949", '#e6c9c1'],
        configs: [],
        dialogVisible: false,
        ids: [],
        config_value: ""
      }
    },
    mounted() {
      this.getList()
    },
    methods: {
      getList() {
        configlist().then((res) => {
          this.configs = res.data
            // .map((item) => {
            // item.config_value = JSON.parse(item.config_value)
            // return item
          // })
          console.log(this.configs);
        })
      },
      //修改
      updateconfigs(){
        // this.config_value = this.ids.config_value
        let params = {
          id: this.ids.id,
          config_value: this.config_value
        }
        updateconfig(params).then((res) => {
          console.log(res);
          this.dialogVisible = false
          this.getList()
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .config {
    font-size: 14px;

    .elrow {
      margin-bottom: 20px;
    }

    .clearfix {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .cirbox {
      display: flex;
      align-items: center;

      .circle {
        display: inline-block;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        margin-right: 10px;
      }
    }

    .center {
      display: flex;
      justify-content: space-between;
      align-items: center;
      // text-align: center;
      .tesch {
        display: flex;
        align-items: center;
      }

      .backstyle {
        text-align: center;
        display: block;
        color: #fff;
        padding: 10px 20px;
        border-radius: 6px;

        span {
          display: inline-block;
          font-size: 20px;
          padding: 10px;
        }
      }
    }
  }
</style>
